﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CheckBoxList</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>

    <style>
    .horizontal .mini-group
    {
        display:table;
    }
    .horizontal .mini-group-header
    {
        display:table-cell;
        width:100px;
        text-align:right;
        padding-right:5px;
    }
    .horizontal .mini-group-body
    {
        display:table-cell;
    }
    </style>
</head>
<body>
    <h1>分组复选框</h1>      
    
    <div id="cbl1" class="mini-checkboxlist horizontal" repeatItems="3" repeatLayout="table"
        textField="text" valueField="id" value="cn,usa" groupField="continent"
        url="../data/countrys.txt" >
    </div>

    <input  type="button" value="分组" onclick="groupBy()" />
    <input type="button" value="取消分组" onclick="clearGroup()"/>
    <input  type="button" value="setValue" onclick="setValue()" />
    <input type="button" value="getValue" onclick="getValue()"/>

    <script type="text/javascript">

        function groupBy() {
            var ckl = mini.get("cbl1");
            ckl.setGroupField("continent");
        }

        function clearGroup() {
            var ckl = mini.get("cbl1");
            ckl.setGroupField(null);
        }

        function setValue() {
            var obj = mini.get("cbl1");
            obj.setValue("usa");

        }
        function getValue() {
            var obj = mini.get("cbl1");
            alert(obj.getValue());
        }
        
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>groupField="continent"对数据进行分组显示。
        </p>
    </div>
</body>
</html>